<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            .imgg img {
                max-width: 100px
            }
        </style>
        <title>产品列表</title>
    </head>
    <body>
        <div class="margin clearfix">
            <input type="hidden" id="id" th:value="${param.id}"/>
            <input type="hidden" id="sortType" th:value="${param.sortType}"/>
            <table class="table table-striped table-bordered table-hover" id="sample-table">
                <thead>
                <tr>
                    <th><label><input id="c1" type="checkbox" class="ace"><span class="lbl"></span></label></th>
                    <th>订单编号</th>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>商品图片</th>
                    <th>商品类型</th>
                    <th>价格</th>
                    <th>积分</th>
                    <th>所属名称</th>
                    <th>品牌</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
        <button id="buys" class="btn btn-primary" style="float:right;margin-right:200px;margin-bottom:10px;">多件购买
        </button>
    </body>
</html>
<script>
    jQuery(function ($) {
        var oTable1 = $('#sample-table').dataTable({
            iDisplayLength: 5, //默认显示的记录数
            aLengthMenu: [5, 10, 15, 20, 50, 100], //更改显示记录数选项
            bFilter: false, //是否启动过滤、搜索功能
            "autoWidth": true,
            "ordering": false,
            "bStateSave": false,//状态保存
            "serverSide": true,		//打开服务器模式
            "ajax": {
                "url": "/procurement/orderProduct",
                "type": "POST",
                dataSrc: "data",
                data: function (d) {
                    var param = {};
                    if ($("#id").val() != null || $("#id").val() != "") {
                        param.sid = $("#id").val()
                    }
                    if ($("#sortType").val() != null || $("#sortType").val() != "") {
                        param.sortType = $("#sortType").val()
                    }
                    param.draw = d.draw;
                    param.start = d.start;
                    param.length = d.length;
                    return param;//自定义需要传递的参数。
                },
            },
            "columns": [
                {"data": null},
                {"data": 'orderId'},
                {"data": 'proId'},
                {"data": 'productName'},
                {
                    "data": 'picture', "render": function (data) {
                        return '<img src="/upload/' + data + '" height="50px">'
                    }
                },
                {"data": 'productType'},
                {"data": 'retailPrice'},
                {"data": 'integral'},
                {"data": 'sortssName'},
                {"data": 'brand'},
                {"data": 'remarks'},
                {"data": null}
            ], "columnDefs": [
                {
                    // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
                    // return后边是我们希望在指定列填入的按钮代码
                    "targets": 0,
                    "render": function (data, type, full, meta) {
                        return /*<![CDATA[*/"<label><input type=\"checkbox\" id='check' name='check' class=\"ace\" ><span class=\"lbl\"></span></label>"/*]]>*/
                    }
                },
                {
                    // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
                    // return后边是我们希望在指定列填入的按钮代码
                    "targets": -1,
                    "render": function (data, type, full, meta) {

                        return /*<![CDATA[*/"<div title=\"查看商品\" id='details' class=\"btn btn-xs btn-success\" ><i class=\"icon-list bigger-120\"></i></div> " +
                            "<div title=\"购买\" id=\"member_fh\" class=\"btn btn-xs btn-info\" ><i class=\"bigger-10\" style=\"fout-size:5\">购买</i></div>"/*]]>*/
                    }
                }
            ]
        });

        $("table tbody").on("click", "#details", function () {
            //获取行
            var row = $("table tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var no = $("table").find("tr").eq(row).find("td").eq(1).text();
            layer.open({
                type: 2,
                title: '订购商品详情',
                shadeClose: true,
                shade: 0.8,
                area: ['90%', '90%'],
                content: '/procurement/orderDetails?no=' + no, //iframe的url
            });
        });

        $("table tbody").on("click", "#member_fh", function () {
            //获取行
            var row = $("table tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var no = $("table").find("tr").eq(row).find("td").eq(1).text();
            layer.open({
                type: 2,
                title: '购买',
                shadeClose: true,
                shade: 0.8,
                area: ['50%', '60%'],
                content: '/procurement/buy_product?no=' + no,//iframe的url
                end: function () {
                    oTable1.fnDraw(false);
                }
            });

        });

        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });

        $("table tbody").on("click", ".ace", function () {
            $("#c1").removeAttr("checked");
        })

        $("#buys").on("click", function () {
            var nos = []
            $.each($('#check:checked'), function () {
                var row = $("table tr").index($(this).closest("tr"));
                //获取某列（从0列开始计数）的值
                var no = $("table").find("tr").eq(row).find("td").eq(1).text();
                nos.push(no)
            });
            if (nos.length <= 0) {
                layer.msg('请选择最少一件商品', {icon: 2});
                return false;
            }
            layer.open({
                type: 2,
                title: '购买',
                shadeClose: true,
                shade: 0.8,
                area: ['50%', '90%'],
                content: '/procurement/buys_product?nos=' + nos,//iframe的url
                end: function () {
                    $("#c1").removeAttr("checked");
                    oTable1.fnDraw(false);
                }
            });
        })

    })
</script>
